:root {
  --primary-glow: #e94560;
  --secondary-glow: #00e5ff;
  --background-start-rgb: 10, 8, 28;
  --background-end-rgb: 25, 23, 50;
  --card-bg-rgb: 255, 255, 255;
  --focus-color-primary: #e94560;
  --focus-color-secondary: #00e5ff;
}

.container {
  max-width: 384px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  background: linear-gradient(145deg, rgb(var(--background-start-rgb)), rgb(var(--background-end-rgb)));
  color: var(--theme-text-secondary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  
  // 添加背景光效
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -15%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(var(--primary-glow), 0.15) 0%, rgba(var(--primary-glow), 0) 70%);
    animation: pulse-glow-1 15s infinite alternate;
    z-index: -1;
    pointer-events: none;
  }
}

// 添加第二个光效
.container::before {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -20%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(var(--secondary-glow), 0.15) 0%, rgba(var(--secondary-glow), 0) 70%);
  animation: pulse-glow-2 18s infinite alternate;
  z-index: -1;
  pointer-events: none;
}

@keyframes pulse-glow-1 {
  from {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.8;
  }
  to {
    transform: scale(1.1) rotate(20deg);
    opacity: 1;
  }
}

@keyframes pulse-glow-2 {
  from {
    transform: scale(1.1) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: scale(0.9) rotate(-20deg);
    opacity: 0.8;
  }
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  // background: linear-gradient(145deg, rgb(var(--background-start-rgb)), rgb(var(--background-end-rgb)));
  // border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
}

.content {
  flex: 1;
  padding: 40px 0 20px 0;
  position: relative;
  z-index: 10;
}

.titleSection {
  text-align: center;
  margin-bottom: 40px;
}

.mainTitle {
  font-size: 48px; // text-5xl
  font-weight: 700;
  background: linear-gradient(90deg, #ffae73, #ff6b8b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 35px rgba(255, 107, 139, 0.4);
  margin: 0 0 16px 0;
}

.subtitle {
  color: var(--theme-text-muted);
  font-size: 18px; // text-lg
  font-weight: 300;
  margin: 0;
}

.tabContainer {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  margin-bottom: 32px;
}

.tabButton {
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 16px; // text-base
  font-weight: 700;
  transition: all 0.3s ease;
  transform: scale(1);
  border: none;
  background: transparent;
  color: var(--theme-text-muted);
  cursor: pointer;
  
  &:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--theme-text-primary);
  }
  
  &.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--theme-text-primary);
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.icon{
  margin-left: 20px;
}

.tabContent {
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: fadeIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.glassCard {
  background: var(--theme-bg-card);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(var(--card-bg-rgb), 0.12);
  border-radius: 28px;
  padding: 28px;
  margin-bottom: 20px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden; // 防止内容溢出
}

.cardHeader {
  padding-bottom: 16px !important;
  display: flex;
  align-items: center;
  gap: 12px;

  // 重置可能的默认样式
  * {
    margin: 0;
    padding: 0;
  }
}

// 使用 norem- 前缀来避免 px 转 rem
.norem-cardHeader {
  padding-bottom: 16px !important;
  display: flex;
  align-items: center;
  gap: 24px;
}

.iconWrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(236 72 153 / 0.5);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

  span {
    z-index: 10;
    transition: transform 0.5s ease-out;
    text-shadow: 0 0 15px currentColor;
    font-size: 28px;
    color: rgb(244 114 182) !important;
  }

  .material-icons {
    z-index: 10;
    transition: transform 0.5s ease-out;
    text-shadow: 0 0 15px currentColor;
    font-size: 28px;
    color: rgb(244 114 182) !important;
  }
}
.iconUser{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(30, 98, 123);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

  span {
    z-index: 10;
    transition: transform 0.5s ease-out;
    text-shadow: 0 0 15px currentColor;
    font-size: 28px;
    color: rgb(104, 232, 249) !important;
  }

  .material-icons {
    z-index: 10;
    transition: transform 0.5s ease-out;
    text-shadow: 0 0 15px currentColor;
    font-size: 28px;
    color: rgb(104, 232, 249) !important;
  }
}

.headerText {
  flex: 1;
}

.cardTitle {
  font-size: 24px; // text-2xl
  font-weight: 700;
  color: var(--theme-text-primary);
  margin: 0 0 8px 0;
}

.cardSubtitle {
  font-size: 16px; // text-base
  color: var(--theme-text-muted);
  font-weight: 300;
  margin: 0;
}

.avatarSection {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

.avatarUpload {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%; // 改为圆形
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.3) !important; // 改为虚线边框
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 auto;

  &:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
  }

  .material-icons {
    font-size: 40px; // 从48px调整为40px，相对于80px的容器更合适
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 确保图标完全居中
  }

  &:hover .material-icons {
    color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(1.1); // 保持居中并缩放
  }

  input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
  }


  // 当有图片时隐藏上传图标
  &:has(.adm-image-uploader-cell-image) {
    .material-icons {
      display: none;
    }
  }

  // 当没有图片时显示边框和图标
  &:not(:has(.adm-image-uploader-cell-image)) {
    border: 2px solid rgba(255, 255, 255, 0.3);

    .material-icons {
      display: block;
    }
  }

  // 当有图片时隐藏边框
  &:has(.adm-image-uploader-cell-image) {
    border: none;
  }
}

.uploadText {
  font-size: 14px; // text-sm
  color: var(--theme-text-muted);
  margin: 8px 0 0 0; // 改为正常文档流，添加顶部间距
  text-align: center;
  width: 100%;
}

.formFields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fieldGroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.label {
  display: block;
  font-size: 16px; // text-base
  font-weight: 600;
  color: var(--theme-text-secondary);
  margin-bottom: 12px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;

  .material-icons {
    font-size: 20px; // text-xl
    margin-right: 12px;
    opacity: 0.9;
  }
}

.formInput {
  background-color: rgba(var(--card-bg-rgb), 0.05);
  border: 1px solid rgba(var(--card-bg-rgb), 0.1);
  color: var(--theme-text-primary);
  padding: 12px 20px;
  width: 100%;
  max-width: 100%; // 确保不超过容器宽度
  box-sizing: border-box; // 包含padding和border在宽度计算内
  border-radius: 12px;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  font-size: 16px; // text-base
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  &:focus {
    outline: none;
    border-color: var(--focus-color-primary);
    box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.2);
    background-color: rgba(var(--card-bg-rgb), 0.08);
    color: var(--theme-text-primary) !important; // 确保focus时文字颜色为白色
  }

  &::placeholder {
    color: var(--theme-text-muted);
    font-weight: 300;
  }
}

.submitSection {
  padding: 16px 0 32px 0;
  max-width: 384px;
  margin: 20px auto 0;
}

.submitButton {
  width: 100%;
  display: inline-block;
  text-align: center;
  color: var(--theme-text-primary);
  font-weight: 700;
  padding: 16px;
  border-radius: 100px;
  transition: all 0.3s ease;
  transform: translateY(0);
  border: none;
  background: linear-gradient(90deg, #ff6b8b, #ff8e53);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 25px -5px rgba(255, 107, 139, 0.5), 0 5px 15px -5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 20px;
  letter-spacing: 0.5px;

  &:hover {
    box-shadow: 0 12px 30px -8px rgba(255, 107, 139, 0.6), 0 5px 15px -5px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }

  &:focus {
    box-shadow: 0 0 0 4px rgba(255, 107, 139, 0.3), 0 12px 30px -8px rgba(255, 107, 139, 0.6), 0 5px 15px -5px rgba(0, 0, 0, 0.2);
  }

  .material-icons {
    font-size: 24px;
  }
}

.uploadWrapper {
  :global {
    .adm-image-uploader-cell {
      background-color: transparent;
      border: none;
      border-radius: 50%; // 改为圆形
      width: 96px;
      height: 96px;
      position: relative;
    }

    .adm-image-uploader-cell-icon {
      display: none; // 隐藏默认图标，使用自定义图标
    }

    .adm-image-uploader-upload-button {
      width: 96px;
      height: 96px;
      border-radius: 50%; // 改为圆形
      background: transparent;
      border: none;
    }

    .adm-image-uploader-cell-image {
      width: 100%;
      height: 100%;
      border-radius: 50%; // 改为圆形
      object-fit: cover;
    }

    .adm-image-uploader-cell-delete {
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      width: 24px;
      height: 24px;
      top: 8px;
      right: 8px;
    }
  }
}

// Loading styles
.loadingContainer {
  display: flex;
  justify-content: center;
}
.loadingBox{
  width: 120px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.loadingText {
  margin-top: 16px;
  color: var(--theme-text-muted);
  font-size: 14px;
  text-align: center;
}

// 字体图标加载优化 - 防止首次加载时显示英文
:global {
  // 字体未加载完成时，隐藏所有Material Icons图标
  body:not(.fonts-loaded) {
    .material-icons,
    .material-icons-outlined {
      visibility: hidden !important;
      opacity: 0 !important;
    }
  }
  
  // 字体加载完成后，添加淡入动画使显示更平滑
  body.fonts-loaded {
    .material-icons,
    .material-icons-outlined {
      visibility: visible !important;
      opacity: 1 !important;
      animation: iconFadeIn 0.2s ease-in;
    }
  }
  
  @keyframes iconFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

// 全局样式修改
:global {
  .dark-theme .adm-list{
    background-color: transparent !important;
  }
  .adm-list-body-inner {
    background-color: transparent !important;
  }

  .adm-list-body {
    border: none !important;
    background-color: transparent !important;
  }
  .adm-list-item{
    background-color: transparent !important;
    padding-left: 0 !important;
  }
  .adm-list-item-content{
    border: none !important;
    padding:0 !important;
  }
  .adm-image-uploader-upload-button-icon{
    display: none !important;
  }
  .add-a-photo-icon{
    font-size: 30px !important;
  }
  .mr-10{
    margin-right: 10px !important;
  }
  
  // 确保Input和TextArea输入时文字颜色为白色
  .adm-input-element,
  .adm-text-area-element {
    color: var(--theme-text-primary) !important;
    
    &:focus {
      color: var(--theme-text-primary) !important;
    }
  }
  
  // 确保Input和TextArea的placeholder颜色
  .adm-input-element::placeholder,
  .adm-text-area-element::placeholder {
    color: #a0aec0 !important;
  }
  .dark-theme .adm-input-element:focus{
    color: var(--theme-text-primary) !important;
  }
  .adm-image-uploader-cell-delete-icon{
    left: 9px !important;
    top: 9px !important;
  }


}